<template>
    <!-- 滚动区域开始 -->
    <view class="container">
        <z-paging
            ref="paging"
            v-model="blacklist"
            :scroll-with-animation="true"
            :default-page-size="params.page_size"
            @query="handlerPullRefreshAndMore"
            @scroll="handleScroll"
        >
            <!-- 搜索区域开始 -->
            <template #top>
                <TridentSearch @search="handleSearch"/>
            </template>

            <!-- 骨架屏 -->
            <uv-skeletons :loading="isSkeleton" :skeleton="skeletons"></uv-skeletons>

            <!-- 列表区域开始 -->
            <view class="list-wrap">
                <uni-swipe-action>
                    <view class="swipe-action-item" v-for="(item, index) in blacklist" :key="index">
                        <uni-swipe-action-item>
                            <TridentFriendItem :friend="item"/>

                            <!-- 右侧删除按钮 -->
                            <template #right>
                                <view class="swipe-right">
                                    <button @click="handleCancelBlack(item)" class="button delete-button">取消</button>
                                </view>
                            </template>
                        </uni-swipe-action-item>
                    </view>
                </uni-swipe-action>
            </view>
            <!-- 列表区域结束 -->

            <!-- 加载更多提示 -->
            <template #loadingMoreNoMore>
                <view :style=" safeAreaInsets && safeAreaInsets.bottom > 0 ? 'padding-bottom: ' + safeAreaInsets.bottom + 'px': ''" class="no-more" v-if="totalPage <= params.page && totalPage > 1">我也是有底线的！</view>
            </template>
        </z-paging>
    </view>
    <!-- 滚动区域结束 -->

    <!-- 返回顶部 -->
    <TridentBackTop @backTop="backTop" :isShowBackTop="isShowBackTop"/>
</template>

<script lang="ts" setup>
import { reqBlacklistFriendAPI, reqFriendListAPI } from '@/apis/friend'
import type { Friend, FriendListParams } from '@/types/friend'
import { onShow } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'

// --------------- 定义全局变量开始 ---------------
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

const paging = ref()

// 参数
const params = ref<FriendListParams>({
    username: '',
    status: '-1',
    is_my_friend: 1,
    is_friend_info: 1,
    page: 1,
    page_size: 10
})
// --------------- 定义全局变量结束 ---------------



onShow(() => {
    for (let index = 0; index < 10; index++) {
        skeletons.push(skeleton as never)
    }
})



// --------------- 定义搜索功能开始 ---------------
const handleSearch = async (e: any) => {
    params.value.username = e.keyword.value
    params.value.page = 1
    blacklist.value = []
    paging.value.reload()
}
// --------------- 定义搜索功能结束 ---------------



// ------------下拉刷新 + 加载更多开始 ------------
const handlerPullRefreshAndMore = async (pageNo: number, pageSize: number) => {
    params.value.page = pageNo
    await getBlacklist()
}
// ------------下拉刷新 + 加载更多结束 ------------



// --------------- 定义列表功能开始 ---------------
// 黑名单列表
const blacklist = ref<Friend[]>([])

// 总条数
const total = ref<number>(0)

// 总页数
const totalPage = ref<number>(0)

// 获取黑名单
const getBlacklist = async () => {
    // 显示骨架
    if (params.value.page == 1) {
        isSkeleton.value = true
    }

    // 请求数据
    const result = await reqFriendListAPI(params.value)
    total.value = result.data.total
    totalPage.value = result.data.total_page
    paging.value.complete(result.data.friends)

    // 隐藏骨架
    isSkeleton.value = false
}
// --------------- 定义列表功能结束 ---------------



// --------------- 定义取消拉黑开始 ---------------
const handleCancelBlack = async (friend: Friend) => {
    const result = await reqBlacklistFriendAPI({
        ids: friend.id + '',
        status: 1
    })

    const index = blacklist.value.findIndex(item => item.id == friend.id)
    blacklist.value.splice(index, 1)

    uni.showToast({
        title: result.message,
        duration: 1000
    })
}
// --------------- 定义取消拉黑结束 ---------------



// --------------- 返回顶部功能开始 ---------------
// 定义是否显示返回顶部
const isShowBackTop = ref(false)

// 返回顶部
const backTop = () => {
  paging.value.scrollToTop()
}

// 当滚动触发时，调用事件用于显示、隐藏返回顶部图标
const handleScroll = (e:any) => {
  isShowBackTop.value = e.detail.scrollTop > 300 ? true : false
}
// --------------- 返回顶部功能结束 ---------------



// --------------- 定义骨架变量开始 ---------------
// 定义是否显示骨架
const isSkeleton = ref(false)

// 定义骨架参数
const skeleton = reactive({
  type: 'flex',
  num: 1,
  style: 'padding: 15rpx 30rpx 15rpx 25rpx;background-color: #fff;border-bottom: 2rpx solid #f6f6f6;align-items: center;',
  children: [
    // 图片区域
    {
      type: 'custom',
      num: 1,
      style: 'width: 90rpx;height: 90rpx;border-radius: 10rpx;margin-right: 40rpx;'
    },

    {
      type: 'custom',
      num: 1,
      style: ['width: 180rpx;height: 40rpx;']
    }
  ]
})

const skeletons = reactive([])
// --------------- 定义骨架变量结束 ---------------
</script>

<style scoped lang="scss">
.container {
    .list-wrap {
        .swipe-action-item {
            background-color: #fff;
            padding: 0 0 0 30rpx;
            border-bottom: 2rpx solid #EDEDED;
            align-items: center;
            &:last-child {
                border-bottom: none;
            }
            .swipe-right {
                display: flex;
                height: 100%;
                .button {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 50px;
                    padding: 6px;
                    line-height: 1.5;
                    color: #fff;
                    font-size: 26rpx;
                    border-radius: 0;
                }

                .delete-button {
                    background-color: #9a9b9b;
                }
            }
        }
    }
}
</style>